import React, { Component } from 'react'
import { Select } from 'antd'
import { selectRole } from '../../services/user'

const Option = Select.Option
class RoleNameSelect extends Component {
  constructor (props) {
    super(props)
    const value = this.props.value || {}
    this.state = {
      ROLE_ID: value || 0,
      options: [],
    }
    let options = {}
    let m = this.getData()
    m.then((result) => {
      options = result.list.map(d => <Option key={d.ID}>{d.ROLE_NAME}</Option>)
      this.options = options
      console.log(this.options)
    })
  }

  componentWillReceiveProps(nextProps) {
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.setState(value);
    }
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue));
    }
    console.log(this.state);
  }

  async getData () {
    let s = await selectRole()
    return s
  }


  handleBlur() {
    console.log('blur')
  }

  handleFocus() {
    console.log('focus')
  }
  handleChange=(values) =>
  {
    if (!('value' in this.props)) {
      this.setState(...this.state,{ROLE_ID:values})
    }
    this.triggerChange({ROLE_ID:values})
  }
  render()
  {
    const state=this.state
    const m = this.options
    return( <Select
      showSearch
      value={state.ROLE_ID}
      // style={{ width: 300}}
      onChange={this.handleChange}
    >
      {m}
    </Select>)

  }
}

export default RoleNameSelect
